<template>
  <div class="tag">
    <div class="tag_title">Can add <span style="color:#ff781a;font-weight:700;">{{tagNums}}</span> others tag</div>
    <div class="tag_main">
      <div class="class1">stages:<div :class="activeIndex_Class1==index ? 'activetag' : '' " class="class1_item" @click="itemClick1(index)"  v-for="(item,index) in tagClass[0].stages" :key="index">{{item}}</div></div>
      <lateralScroll :Contentlength='50'><div  class="class2" ref="class2" slot="lateralContent">grades:<div :class="activeIndex_Class2==index ? 'activetag' : '' "  @click.stop="itemClick2(index)"  class="class2_item" v-for="(item,index) in tagClass[0].grades" :key="index">{{item}}</div></div></lateralScroll>
      <div class="class3">subjects:<div :class="activeIndex_Class3==index ? 'activetag' : '' "  @click="itemClick3(index)" class="class3_item" v-for="(item,index) in tagClass[0].subjects" :key="index">{{item}}</div></div>
      <div class="class4">others:<div :class="activeIndex_Class4==index ? 'activetag' : '' "  @click="itemClick4(index)" class="class4_item" v-for="(item,index) in tagClass[0].others" :key="index">{{item}}</div></div>
    </div>
  </div>
</template>

<script>
import lateralScroll from "components/lateralScroll/lateralScroll";
  export default {
    name:'Tag',
    data() {
      return {
        class2_length: 0,
        activeIndex_Class1:0,
        activeIndex_Class2:0,
        activeIndex_Class3:0,
        activeIndex_Class4:0,
      }
    },
    props: {
      // 标签个数
      tagNums: {
        type: Number,
        default:5 
      },
      // 标签分类：
      tagClass:{
        type:Array,
        default(){
          return[]
        }
      },
      // tagClass2:{
      //   type:Array,
      //   default(){
      //     return []
      //   }
      // },
      // tagClass3:{
      //   type:Array,
      //   default(){
      //     return []
      //   }
      // }
    },
    methods: {
      itemClick1(index) {
        // console.log(this.tagClass[0].stages[index]);
        this.activeIndex_Class1 = index;
        this.$emit("itemClick1",index);
      },
      itemClick2(index) {
        //  console.log(this.tagClass[0].grades[index]);
         this.activeIndex_Class2 = index;
         this.$emit("itemClick2",index)
      },
      itemClick3(index) {
        //  console.log(this.tagClass[0].subjects[index]);
         this.activeIndex_Class3 = index;
         this.$emit("itemClick3",index);
      },
      itemClick4(index) {
        //  console.log(this.tagClass[0].subjects[index]);
         this.activeIndex_Class4 = index;
         this.$emit("itemClick4",index);
      }
    },
    activated() {
     let class2 = this.$refs.class2.children;
        // console.log("class2 != null")
        for (let i = 0; i < class2.length; i++) {
          this.class2_length += class2[i].offsetWidth + 10; //每一个元素的偏移加上外边距
        }
        // console.log("总宽度：",this.class2_length);
        this.$refs.class2.style.width = this.class2_length+50+'px';
        // console.log(this.$refs.class2.style);
    },
    components: {
      lateralScroll,
    },
  }
</script>

<style lang="less" scoped>
.tag{
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  background-color: rgba(30, 30, 30, 0.5);
  box-shadow:-5px -5px 5px 0px rgba(30, 30, 30, 0.6),5px 5px 5px 0px rgba(30, 30, 30, 0.6);
  width: 100%;
  height: 7rem;
  font-size: 0.5rem;
  box-sizing: border-box;
  padding: 1px 15px 8px;
  color: #ffffff;
  .tag_title{
    height: 1rem;
    line-height: 1rem;
    border-bottom: solid 1px #ff781a;
  }
  .tag_main{
    width: 100%;
    .class1,.class2,.class3,.class4{
      display: flex;
      flex-wrap: wrap;
      margin-top: 5px;
      .class1_item,.class2_item,.class3_item,.class4_item{
        margin:0px 5px;
        background-color: #13aa52;
        border-radius: 5px ;
        padding: 2px 5px;
        cursor: pointer;
      }
      .class1_item:hover,.class2_item:hover,.class3_item:hover,.class4_item:hover{
        color:#ff781a
      }
    }
    .class2{
      flex-wrap: nowrap;
      .class2_item{
        white-space: nowrap;
      }
    }
    .class3 .class3_item{
      margin-top: 15px;
      background-color: #6c757d;
    }
    .class4 .class4_item{
      margin-top: 15px;
      background-color: skyblue;
    }
  }
}
.activetag{
  color: #ff781a;
}
</style>